<template>
  <div class="achievement">
    <div class="achievement-header clearfix">
      <ul class="item fl">
        <li v-for="(item, index) in items" :key="index" @click="selectItem(item.code,item.type)">
          <span :class="[current == item.code ? 'cur' : '']">{{item.name}}</span>
        </li>
      </ul>
      <ul class="date fr" @click="showData">
        <li class="date_time" :class="info=='按条件查询'?'':'active'">
          <span>按条件查询</span>
          <i class="icon-right"></i>
        </li>
      </ul>
    </div>
    <div class="achievement-content">
      <ul class="lists">
        <li class="list">
          <span class="fl">代理商等级</span>
          <span class="fr">{{dls_rank_name}}</span>
        </li>
        <li class="list">
          <span class="fl">团队业绩/佣金(元)</span>
          <span class="fr">{{total_commission}}</span>
        </li>
        <li class="list">
          <span class="fl">个人消费金额(元)</span>
          <span class="fr">{{personal_consume||'0.00'}}</span>
        </li>
      </ul>
    </div>
    <div class="dls-target" v-if="dls_degrade_check==1">
      <div class="target-title">
        <span class="title">我的目标</span>
        <span class="txt">如果没有达成下列任何一个条件，将自动降级</span>
      </div>
      <div class="target-date">
        <span class="fl">剩余日期</span>
        <span class="fr day">{{dls_downgrade.dls_degrade_check_days}}天</span>
      </div>
      <div class="target-item" v-if="dls_downgrade.degrade_order_amount>0">
        <div class="title">订单总金额（元）</div>
        <div class="target-detail">
          <div class="li left">
            <div class="data now-data">{{dls_downgrade.trade_amount}}</div>
            <span>当前</span>
          </div>
          <div class="li right">
            <div class="data tar-data">{{dls_downgrade.degrade_order_amount}}</div>
            <span>目标</span>
          </div>
        </div>
      </div>
      <div class="target-item" v-if="dls_downgrade.degrade_order_amount_team>0">
        <div class="title">团队订单总金额（元）</div>
        <div class="target-detail">
          <div class="li left">
            <div class="data now-data">{{dls_downgrade.total_fee}}</div>
            <span>当前</span>
          </div>
          <div class="li right">
            <div class="data tar-data">{{dls_downgrade.degrade_order_amount_team}}</div>
            <span>目标</span>
          </div>
        </div>
      </div>
      <div class="target-item" v-if="dls_downgrade.degrade_order_num_team>0">
        <div class="title">团队订单笔数（笔）</div>
        <div class="target-detail">
          <div class="li left">
            <div class="data now-data">{{dls_downgrade.total_num}}</div>
            <span>当前</span>
          </div>
          <div class="li right">
            <div class="data tar-data">{{dls_downgrade.degrade_order_num_team}}</div>
            <span>目标</span>
          </div>
        </div>
      </div>
    </div>
    <date-pop
      @cancel="cancelTime"
      @confirm="selectTime"
      :current="current"
      :timeData="dateInfo"
      v-if="show_date"
    ></date-pop>
  </div>
</template>

<script>
import Vue from 'vue'
// import 'vant/lib/index.css'
import { Popup } from 'vant'
import datePop from '@/views/user/components/datePop'
import { getDlsYeJi } from '@/api/user/dls/dlsApi'
Vue.use(Popup)
export default Vue.extend({
  data() {
    return {
      dateInfo: {
        year: {},
        quarter: {},
        month: {}
      },
      dls_rank_name: null,
      total_commission: null,
      items: [
        {
          name: '月',
          code: 1,
          type: 'month'
        },
        {
          name: '季度',
          code: 2,
          type: 'quarter'
        },
        {
          name: '年',
          code: 0,
          type: 'year'
        }
      ],
      current: 1,
      type: 'month',
      show_date: false,
      info: '',
      dls_degrade_check: '',
      dls_downgrade: '',
      personal_consume: ''
    }
  },
  created() {
    this.getTime()
    this.init()
  },
  methods: {
    init() {
      /* eslint-disable */
      const value =
        this.current == 1
          ? this.dateInfo.currentMonth
          : this.current == 2
          ? this.dateInfo.currentQuarter
          : ''
      /* eslint-enable */

      const data = {
        type: this.type,
        value,
        year: this.dateInfo.currentYear
      }

      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      getDlsYeJi(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          // this.dateInfo.currentYear = res.data.year
          // this.dateInfo.currentMonth = res.data.k || 12
          // this.dateInfo.currentQuarter = res.data.k || 1
          this.dateInfo.year = res.data.year_list
          this.dateInfo.month = res.data.month
          this.dateInfo.quarter = res.data.quarter
          this.type = res.data.type
          this.dls_rank_name = res.data.dls_info[0].dls_rank_name
          this.total_commission = res.data.dls_info[0].total_commission
          this.dls_degrade_check = res.data.dls_degrade_check
          this.dls_downgrade = res.data.dls_downgrade
          this.personal_consume = res.data.personal_consume
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 获取当前年份、月份、嫉妒
    getTime() {
      const time = new Date()
      const currentYear = time.getFullYear()
      const currentMonth = time.getMonth() + 1
      const currentQuarter = Math.ceil(currentMonth / 3)
      this.dateInfo.currentYear = currentYear
      this.dateInfo.currentMonth = currentMonth
      this.dateInfo.currentQuarter = currentQuarter
    },
    selectItem(code, type) {
      this.cancelTime()
      this.current = code
      this.type = type
      this.init()
    },
    showData() {
      this.show_date = true
    },
    selectTime(e) {
      this.dateInfo.currentYear = e.selectYear
      this.dateInfo.currentMonth = e.selectMonth
      this.dateInfo.currentQuarter = e.selectQuarter
      this.show_date = false
      this.init()
    },
    cancelTime() {
      this.show_date = false
    }
  },
  components: {
    datePop
  }
})
</script>

<style lang="scss">
@import 'src/styles/variables';
@import 'src/styles/mixin';
@import "src/styles/user/yejiStyle/index";
</style>
